<template>
  <div class="shop app_content">
    <!-- 导航栏 -->
    <div class="header_body">
      <header-nav :leftArrow="false" titelText="社区"></header-nav>
    </div>

    <van-empty v-if="records.length == 0" description="广场上空空的" />
    <!-- 底部 -->
    <div class="fix" @click="onSubmit">发表动态</div>
    <div class="records">
      <div class="record" v-for="record in records">
        <div style="display: flex; align-items: center; gap: 10px">
          <img class="avator" :src="record.avator" />
          <div class="name">{{ record.name }}
          
        <div class="time" style="font-weight: 400;color: #666;margin-top: 6px;">{{ record.time }}</div></div>
        </div>
        <div style="margin-top: 10px">
          <div class="content">{{ record.content }}</div>
        </div>
        <div class="imgs">
          <img class="each" :src="img" v-for="img in record.imgs" />
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer_body">
      <footer-nav></footer-nav>
    </div>
    <van-dialog
      v-model:show="info.show"
      title="发表"
      :show-cancel-button="false"
      :show-confirm-button="false"
    >
      <div style="height: 300px">
        <van-form>
          <van-field
            v-model="form.content"
            name="weight"
            maxlength="500"
            label="内容"
            type="textarea"
            placeholder="内容"
            :rules="[{ required: true, message: '请填写内容' }]"
          />
          <van-field name="imgs" label="照片">
            <template #input>
              <van-uploader
                :deletable="false"
                :max-count="2"
                v-model="fileList"
                :after-read="afterRead"
              />
            </template>
          </van-field>
          <div style="margin: 16px; display: flex; gap: 20px">
            <van-button
              block
              style="height: 40px; font-size: 14px"
              type="primary"
              native-type="submit"
              @click="info.show = false"
              >取消</van-button
            >
            <van-button
              style="height: 40px; font-size: 14px"
              block
              type="danger"
              native-type="submit"
              @click="add"
              >发表</van-button
            >
          </div>
        </van-form>
      </div>
    </van-dialog>
  </div>
</template>

<script setup name="Record">
import { showDialog } from "vant";
import moment from "moment";
import { showToast } from "vant"; // 引入提示组件

import { getCom, addCom, upload } from "@/api/http.js";

const router = useRouter();
let records = ref([]); // 是否全选
let info = reactive({
  show: false,
  userInfo: {},
  show: false,
  showCld: false,
});

let form = reactive({
  content: "",
  imgs: [],
});
let fileList = ref([]);

// 新增
const onSubmit = () => {
  if (!info.userInfo.id) {
    showDialog({
      title: "提醒",
      message: "请先登录",
    }).then(() => {
      // on close
      console.log(111);
    });
    return;
  }
  fileList.value = [];
  form.content = "";
  info.show = true;
};

const onConfirm = (data) => {
  console.log(data);
  form.time = moment(data).format("YYYY-MM-DD");
  info.showCld = false;
};

const afterRead = (file) => {
  let formData = new FormData();
  formData.append("file", file.file);
  upload(formData).then((res) => {
    form.imgs.push(res.url);
  });
};

const add = () => {
  addCom({
    ...form,
    imgs: JSON.stringify(form.imgs),
    userid: info.userInfo.id,
    time: moment().format("YYYY-MM-DD HH:mm:ss"),
  }).then((res) => {
    if (res.code == "200") {
      info.show = false;
      getData();
    }
  });
};

const getData = () => {
  getCom(info.userInfo.id).then((res) => {
    res.data = res.data.map((v) => {
      return {
        ...v,
        imgs: v.imgs ? JSON.parse(v.imgs) : [],
      };
    });
    records.value = res.data.sort((a, b) => {
      return moment(b.time).valueOf() - moment(a.time).valueOf();
    });
  });
};

onMounted(() => {
  if (localStorage.getItem("appUserInfo")) {
    info.userInfo = JSON.parse(localStorage.getItem("appUserInfo"));
    getData();
  }
});
</script>

<style lang="less" scoped>
.records {
  padding: 0 12px;
}
.flex-center {
  font-size: 14px;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  border-bottom: 1px solid lightgray;
  padding: 12px 0;
  div {
    flex: 1;
    text-align: center;
  }
}
.fix {
  position: fixed;
  bottom: 60px;
  right: calc(50% - 60px);
  font-size: 14px;
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: red;
  border-radius: 6px;
  color: #fff;
}
.records {
  width: 94%;
  height: 80vh;
  font-size: 14px;
  overflow: hidden;
  overflow-y: scroll;

  .record {
    background: #fff;
    padding: 12px;
    border-radius: 10px;
    margin-top: 10px;
  }

  .name {
    font-weight: bold;
  }
  .content {
    color: #333;
    margin-bottom: 10px;
  }
  .time {
    width: 100%;
    text-align: right;
    font-size: 12px;
  }
  .avator {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
}
.btn {
  height: 40px;
  font-size: 14px;
}

.imgs {
  width: 100%;
  display: flex;

  img {
    width: 46%;
    margin: 10px 2%;
  }
}
.shop {
  background: #f7f7f7;
}
</style>
